<template>
  <div>
    <div class="my_box">
      <div class="my_head">
        <div class="sweep" @click="$router.push('/shopping')">
          <!-- <span class="iconfont icon-saoyisao"></span> -->
          <span class="iconfont icon-jiantou-left"></span>
        </div>
        <div class="setup">
          <span class="iconfont icon-xiaoxi"></span>
          <span class="iconfont icon-shezhi" @click="goAddress"></span>
        </div>
      </div>
      <div class="my_info">
        <div class="img">
          <img :src="user.user_img" />
        </div>
        <div class="user" v-if="token">
          <p>
            {{ user.name }}
            <span class="iconfont icon-jiantou-right-copy"></span>
          </p>
          <p class="autograph">{{ user.user_name }}</p>
        </div>
        <div class="user" @click="$router.push('/login')" v-if="!token">
          <p>请登录 <span class="iconfont icon-jiantou-right-copy"></span></p>
        </div>
      </div>
      <div class="my_whole">
        <div class="box">
          <p>0</p>
          <span>获赞与收藏</span>
        </div>
        <div class="box">
          <p>0</p>
          <span>粉丝</span>
        </div>
        <div class="box">
          <p>0</p>
          <span>关注</span>
        </div>
        <div class="box">
          <p>0</p>
          <span>动态</span>
        </div>
      </div>
      <div class="my_logo">
        <img src="../assets/imgs/我的.png" />
      </div>
      <div class="user_box">
        <div class="box" @click="$router.push('/mycollection')">
          <p>收藏</p>
          <span>{{ collectionNum }}</span>
        </div>
        <div class="box">
          <p>足迹</p>
          <span>0</span>
        </div>
        <div class="box">
          <p>订阅</p>
          <span>0</span>
        </div>
      </div>
      <div class="goods">
        <div class="goods_head">
          <div class="left">购买</div>
          <div class="right">
            0<span class="iconfont icon-jiantou-right-copy"></span>
          </div>
        </div>
        <div class="goods_box">
          <div class="box" @click="$router.push('/myshopping?index=1')">
            <span class="iconfont icon-yinhangka"></span>
            <p>待付款</p>
          </div>
          <div class="box" @click="$router.push('/myshopping?index=2')">
            <span class="iconfont icon-daifahuo"></span>
            <p>待收货</p>
          </div>
          <div class="box">
            <span class="iconfont icon-icon3"></span>
            <p>待发货</p>
          </div>
          <div class="box">
            <span class="iconfont icon-shouhou"></span>
            <p>退款售后</p>
          </div>
          <div class="box">
            <span class="iconfont icon-qiugou"></span>
            <p>求购</p>
          </div>
        </div>
      </div>
      <div class="rotation">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/283528c23a936efb1d51fe47039a82e7.jpg?thumb=1&w=720&h=360"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/283528c23a936efb1d51fe47039a82e7.jpg?thumb=1&w=720&h=360"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/283528c23a936efb1d51fe47039a82e7.jpg?thumb=1&w=720&h=360"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/283528c23a936efb1d51fe47039a82e7.jpg?thumb=1&w=720&h=360"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- <bottom></bottom> -->
    </div>
  </div>
</template>

<script>
// import bottom from "../components/bottom/bottom.vue";
export default {
  data: function () {
    return {
      token: false,
      collectionNum: 0, //收藏数量
      user: {
        name: "",
        user_img:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-a0385443d1df570eafcc89017e43b409_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643872810&t=fc5ca5346073c6bab1868c0ad12104e8",
        user_name: "",
      }, //用户信息
    };
  },
  components: {
    // bottom,
  },
  created() {
    //判断是否登录
    let token = sessionStorage.getItem("token");
    if (token) {
      this.token = true;
      //获取用户信息
      this.user = JSON.parse(sessionStorage.getItem("user"));
    } else {
      this.token = false;
    }
    //获取收藏数量
    let lists = JSON.parse(sessionStorage.getItem("collection"));
    if (lists) {
      this.collectionNum = lists.length;
    } else {
      this.collectionNum = 0;
    }
  },
  methods: {
    goAddress() {
      //判断是否登录
      let token = sessionStorage.getItem("token");
      if(token){
        this.$router.push("/address");
      }else{
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="less">
.my_box {
  .my_head {
    padding: 12px 22px;
    display: flex;
    font-weight: bold;
    justify-content: space-between;
    background-color: #fff;
    .setup {
      span:first-child {
        padding-right: 25px;
      }
    }
  }
  .my_info {
    padding: 13px 20px;
    background-color: #fff;
    display: flex;
    align-items: center;
    .img {
      img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
      }
    }
    .user {
      padding-left: 7px;
      font-size: 14px;
      span {
        display: inline-block;
        transform: scale(0.8);
        font-size: 12px;
        color: #787878;
        padding-left: 7px;
      }
      .autograph {
        font-size: 12px;
        transform: scale(0.9) translateX(-8px);
        padding-top: 4px;
      }
    }
  }
  .my_whole {
    font-size: 12px;
    background-color: #fff;
    padding: 4px 20px;
    display: flex;
    justify-content: space-between;
    .box {
      width: 25%;
      text-align: center;
      p {
        font-weight: bold;
      }
      span {
        display: block;
        transform: scale(0.8);
        color: #787878;
      }
    }
  }
  .my_logo {
    img {
      width: 100%;
      vertical-align: bottom;
    }
  }
  .user_box {
    display: flex;
    justify-content: space-between;
    .box {
      width: 23%;
      font-size: 13px;
      padding: 18px 20px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      p {
        display: inline-block;
        font-weight: bold;
      }
      span {
        display: inline-block;
        transform: scale(0.8);
        color: #787878;
      }
    }
    .box:nth-child(2) {
      border-left: 2px solid #f9fafe;
      border-right: 2px solid #f9fafe;
    }
  }
  .goods {
    margin-top: 1px;
    background-color: #fff;
    padding: 15px 20px 0;
    .goods_head {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      .left {
        font-weight: bold;
      }
      .right {
        color: #787878;
        span {
          display: inline-block;
          font-size: 12px;
          transform: scale(0.8);
          padding-left: 10px;
        }
      }
    }
    .goods_box {
      display: flex;
      justify-content: space-around;
      padding: 18px 0 11px;
      .box {
        text-align: center;
        span {
          font-size: 16px;
        }
        p {
          font-size: 12px;
          transform: scale(0.8);
        }
      }
    }
  }
  .rotation {
    margin-top: 10px;
    padding: 0 20px;
    img {
      width: 100%;
      max-height: 250px;
    }
  }
}
</style>